<script setup lang="ts">
import LineEchart from "@/components/LineEchart.vue";
import { dashboardindex } from "@/utils/api";
import { ref } from "vue";
interface dataType {
  "examPaperCount": number,  //试卷总数
  "questionCount": number,  //题目总数
  "doExamPaperCount": number,  //总答卷数
  "doQuestionCount": number,  //总题数
  "mothDayUserActionValue": number[]  //活跃度
  ,
  "mothDayDoExamQuestionValue": number[]  //月做题数
  ,
  "mothDayText": string[]  //本月天数
}
const data = ref<dataType>({
  "examPaperCount": 0,
  "questionCount": 0,
  "doExamPaperCount": 0,
  "doQuestionCount": 0,
  "mothDayUserActionValue": [],
  "mothDayDoExamQuestionValue": [],
  "mothDayText": []
})
const getdashboardindex = () => {
  dashboardindex<dataType>().then((res) => {
    console.log(res);
    data.value = res.response
  })

}
getdashboardindex()

</script>
<template>
  <div class="supracephalic">
    <div class="card">
      <div class="card-a"> <img src="@/static/星途学堂-考试_试卷.png" alt=""></div>
      <div class="card-a"><span class="sp1">试卷总数</span><br><span>{{ data.examPaperCount }}</span></div>
    </div>
    <div class="card">
      <div class="card-a"> <img src="@/static/星途学堂-考试_试卷.png" alt=""></div>
      <div class="card-a"><span class="sp1">题目总数</span><br><span>{{ data.questionCount }}</span></div>
    </div>
    <div class="card">
      <div class="card-a"> <img src="@/static/星途学堂-考试_试卷.png" alt=""></div>
      <div class="card-a"><span class="sp1">答卷总数</span><br><span>{{ data.doExamPaperCount }}</span></div>
    </div>
    <div class="card">
      <div class="card-a"> <img src="@/static/星途学堂-考试_试卷.png" alt=""></div>
      <div class="card-a"><span class="sp1">答题总数</span><br><span>{{ data.doQuestionCount }}</span></div>
    </div>
  </div>
  <div class="chart">
    <LineEchart></LineEchart>
  </div>
  <div class="chart">
    <LineEchart></LineEchart>
  </div>
</template>
<style lang="scss" scoped>
.supracephalic {
  background-color: #F8F8F8;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;

  .card {
    width: 200px;
    height: 80px;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    align-items: center;

    .card-a {
      width: 30%;
      height: 80%;
      align-content: center;

      .sp1 {
        font-size: 10px;
        color: #6c6b6b;
        margin-bottom: 5px;
      }

      img {
        width: 100%;
        height: 100%
      }

    }
  }
}

.chart {
  height: 370px;
  background-color: #fff;
  margin-top: 10px;
}
</style>
